<template>
  <div>
    <el-card>
      <!-- 筛选区域 -->
      <el-card>
        <!-- 筛选区域 -->
        <el-row :gutter="20" type="flex" justify="space-between" align="middle">
          <!-- 日期选择器 -->
          <el-col :span="5">
            <el-date-picker
                v-model="timeFrame"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                format="YYYY-MM-DD HH:mm:ss"
                date-format="YYYY/MM/DD ddd"
                time-format="A hh:mm:ss"
                style="width: 350px;"
            />
          </el-col>

          <!-- 输入框 -->
          <el-col :span="5">
            <el-input
                v-model="searchForm.warContent"
                placeholder="设备名称"
                clearable
            />
          </el-col>

          <!-- 筛选和重置按钮 -->
          <el-col :span="3">
            <el-button id="filter-button" type="primary" icon="Filter" @click="filterData">筛选</el-button>
            <el-button id="reset-button" type="default" @click="resetFilter">重置</el-button>
          </el-col>


          <!-- 导出报表和记录事件按钮 -->
          <el-col :span="4" justify="end">
            <el-button id="export-button" type="primary" @click="exportReport">导出报表</el-button>
            <el-button id="event-button" type="default" @click="recordEvent">记录事件</el-button>
          </el-col>
        </el-row>
      </el-card>
      <!-- 列表区 -->
      <div style="height: 60vh">
        <el-skeleton :loading="loading" animated>
          <el-table :data="paginatedData" border height="100%" style="width: 100%; margin-top:20px">
            <el-table-column prop="dataSeq" label="序号" />
            <el-table-column prop="deviceName" label="设备名称" />
            <el-table-column prop="startTime" label="维修开始时间" />
            <el-table-column prop="endTime" label="维修结束时间" />
            <el-table-column prop="mainteMethods" label="维护手段" />
            <el-table-column prop="finished" label="完成情况" />
            <!-- 操作列 -->
            <el-table-column label="操作">
              <template #default="{ row }">
                <el-button type="primary" @click="editRow(row)">修改</el-button>
                <el-button type="danger" @click="deleteRow(row)" style="margin-left: 10px;">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-skeleton>
      </div>
      <!-- 分页 -->
      <template #footer>
        <div style="margin-top: -30px">
          <Pagination
              :total="total"
              :current-page.sync="searchForm.current"
              :total-pages="totalPages"
              @update:currentPage="handlePageChange"
          />
        </div>
      </template>
    </el-card>
  </div>
</template>

<script setup>
import {computed, onMounted, reactive, ref, watch} from "vue";
import { useRouter } from 'vue-router'
import http from "../../utils/http/http";
import Pagination from '@/components/Table/Pagination'
import { ElMessage } from 'element-plus';

const router = useRouter();
// Dom 挂载之后
onMounted(() => {
  getMaintenanceEventManagementTableData();
})
//数据
const allTableData = ref([]);//接收后端全部结果
const tableData = ref([]);
const total = computed(() => tableData.value.length);//总记录条数
const totalPages = ref(1);//总页数
// 监听 allTableData 的变化，并同步更新 tableData
watch(allTableData, (newData) => {
  tableData.value = [...newData];
});

watch(total, (newData) => {
  totalPages.value = Math.ceil(newData / searchForm.size);
})

const handlePageChange = (page) => {
  searchForm.current = page;
};
//时间筛选
const timeFrame = ref('')

//搜索条件
const searchForm = reactive({
  current: 1,
  size: 10,
})

// 获取诊断结果列表
const getMaintenanceEventManagementTableData = async () => {
  //分页条件查询
  const res = await getMaintenanceEventManagementData({size: null, current: null});//查询全部
  if (res.data.status) {
    //用all前缀来接收保存
    allTableData.value = res.data.data;
  } else {
    ElMessage.error("获取后端数据失败");
    console.log(res.data.message);
  }
}

//遍历查
const getMaintenanceEventManagementData = (data) => {
  return http.get("/MaintenanceEventManagementData/", data);
};

//分页监听
// 计算当前页需要显示的数据
const paginatedData = computed(() => {
  const start = (searchForm.current - 1) * searchForm.size;
  const end = start + searchForm.size;
  return tableData.value.slice(start, end);
});

//时间筛选数据
const filterData = () => {
  if (timeFrame.value.length === 2) {//确保用户选择了开始时间和结束时间
    const [startTime, endTime] = timeFrame.value;
    tableData.value = allTableData.value.filter(item => {
      const itemTime = new Date(item.triggerTime);
      return itemTime >= new Date(startTime) && itemTime <= new Date(endTime);
    });
  }
}
//重置时间筛选
const resetFilter = () => {
  timeFrame.value = [];
  tableData.value = [...allTableData.value];
}

//加载loading页面
const loading = ref(true);
watch(
    () => paginatedData.value,
    (newValue) => {
      loading.value = !(newValue && newValue.length > 0);
    },
    //配置项确保在组件挂载时，立即执行一次回调，以根据初始值正确设置 loading 的状态
    { immediate: true } // 立即执行一次，以确保初始值状态正确
);
</script>

<style scoped lang="scss">
/*筛选-重置按钮*/
.el-button {
  height: 28px;
  color: #FFFFFF;
  font-size: 12px;
  border-radius: 3px
}
#filter-button {
  background-color: $color-filter-button;
}
#reset-button {
  background-color: $color-reset-button;
}
#export-button{
  background-color: $color-export-button;
}
#event-button{
  background-color: $color-event-button;
}
/*card背景、边框*/
.el-card {
  width: 100%;
  background-color: transparent;
  --el-card-border-color: transparent;
}

:deep(.el-card__body) {
  padding: 0;
}

.el-skeleton {
  margin-top: 20px;
  width: 100%;
}
/*数据表背景*/
:deep(.el-table) {
  color: $color-font-table;//字体颜色
  background-color: transparent;
  --el-table-tr-bg-color: transparent;
  --el-table-header-bg-color: transparent;
  --el-table-row-hover-bg-color: transparent;

  // 鼠标悬停时的行样式
  .el-table__body-wrapper {
    .el-table__row {
      &:hover {
        color: $color-font-table-hover; // 悬停时字体颜色
      }
    }
  }
}
/*日期筛选框背景*/
:deep(.el-input__wrapper) {
  background-color: transparent;
}

/* 修改“开始时间”“结束时间”的占位符颜色 */
:deep(.el-date-editor .el-range-input ) {
  color: white;
}


:deep(.el-date-editor .el-range-separator ) {
  color: rgb(189, 189, 189);
}
//输入框输入字体颜色
:deep(.el-input__wrapper) {
  background-color: transparent;
  input {
    color: white;
  }
}
</style>